<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<div id="rightinfo" class="rightinfo"></div>

<!-- 模板 -->
<script id="list" type="text/html">
    <table class="tablelist">
        <thead>
        <tr>
        <th style="width:8%">UID</th>
        <th>用户名</th>
        <th style="width:15%">昵称</th>
        <th style="width:15%">角色</th>
        <th style="width:15%">状态</th>
        <th style="width:20%">操作</th>
        </tr>
        </thead>
        <tbody>
        <%for(i = 0; i < list.length; i ++) {%>
            <tr <%=#(i%2 ==0) ?'':'class="odd"'%> data-id="<%=list[i].id%>">
            <td><%=list[i].id%></td>
            <td><%=sbuStr(list[i].username,35,'')%></td>
            <td><%=sbuStr(list[i].nickname,8,'')%></td>
            <td><%=userRole(list[i].role_id)%></td>
            <td><%=#list[i].enable?'启用':'<i>停用</i>'%></td>
            <td>
                <a class="tablelink act_clean">清理</a>
                <a class="tablelink act_edit">编辑</a>
                <a class="tablelink act_delete">删除</a>
            </td>
            </tr>
        <%}%>        
        </tbody>
    </table>  
    <div class="pagin">
        <div class="message">共<i class="blue"><%=record_count%></i>条记录，当前显示第&nbsp;<i class="blue"><%=page_num%>/<%=page_count%></i>&nbsp;页</div>
        <div class="paginList" id="page_bar"></div>
    </div>
    <div class="clearfloat"></div>
</script>

<script id="add" type="text/html">
<form action="<?php echo site_url('ajax/user_handle/modify');?>" method="POST">  
    <div class="formtitle"><span>添加系统用户</span></div> 
    <input name="id" type="hidden" value="0" />
    <ul class="forminfo">
        <li><label>用户名<b>*</b></label><input name="username" type="text" class="dfinput" /><i></i></li>
        <li><label>登陆密码<b>*</b></label><input name="password" type="text" class="dfinput" /><i></i></li>
        <li><label>昵称</label><input name="nickname" type="text" class="dfinput"/></li>
        <li>
        <label>用户头像</label>
            <span class="imgshow" id="picture">
                <input name="picture" value="" type="hidden" />
                <div class="infobox">
                    <img src=""/>
                    <a>×</a>
                </div>
            </span>
            <a class="file"><span>上传图片</span><input id="up_picture" name="up_picture" type="file" /></a>
        </li>
        <li>
            <label>用户角色</label> 
            <select name="role_id" class="selectmenu">
                <option value="2" selected="selected">系统管理员</option>
                <option value="1">超级管理员</option>
            </select> 
        </li>
        <li><label>是否启用</label><cite><input id="enable_yes" name="enable" type="radio" value="1" checked="checked"/><label for="enable_yes">是</label><input id="enable_no" name="enable" type="radio" value="0"/><label for="enable_no">否</label></cite></li>
        <li><label>&nbsp;</label><input type="submit" class="btn" value="确认保存"/><input type="button" class="btn btn_cancle" value="取消"/></li>
    </ul>
</form>
</script>

<script id="edit" type="text/html">
<form action="<?php echo site_url('ajax/user_handle/modify');?>" method="POST">  
    <div class="formtitle"><span>编辑系统用户</span></div> 
    <input name="id" type="hidden" value="<%=id%>" />
    <ul class="forminfo">
        <li><label>用户名</label><input name="username" value="<%=username%>" type="text" class="dfinput"/><i>用户名不建议修改</i></li>
        <li><label>登陆密码</label><input name="password" value="" title="<%=password%>" type="text" class="dfinput" /><i>密码不更改时，此项请勿输入</i></li>
        <li><label>昵称</label><input name="nickname" value="<%=nickname%>" type="text" value="新手" class="dfinput"/></li>
        <li>
        <label>用户头像</label>
            <span class="imgshow" id="picture">
                <input name="picture" value="<%=picture%>" type="hidden" />
                <div class="infobox">
                    <img src=""/>
                    <a>×</a>
                </div>
            </span>
            <a class="file"><span>上传图片</span><input id="up_picture" name="up_picture" type="file" /></a>
        </li>
        <li>
            <label>用户角色</label> 
            <select name="role_id" class="selectmenu">
                <option value="2" <%=role_id=='2'?'selected="selected"':''%>>系统管理员</option>
                <option value="1" <%=role_id=='1'?'selected="selected"':''%>>超级管理员</option>
            </select> 
        </li>
        <li>
            <label>是否启用</label>
            <cite>
                <input id="enable_yes" name="enable" type="radio" value="1" <%=enable?'checked="checked"':''%>/>
                <label for="enable_yes">是</label>
                <input id="enable_no" name="enable" type="radio" value="0" <%=enable?'':'checked="checked"'%>/>
                <label for="enable_no">否</label>
            </cite>
        </li>
        <li><label>&nbsp;</label><input type="submit" class="btn" value="确认保存"/><input type="button" class="btn btn_cancle" value="取消"/></li>
    </ul>
</form>
</script>

<!-- 脚本 -->
<script src="js/template-helper.js" type="text/javascript"></script>
<script type="text/javascript">
layer.config({extend: 'extend/layer.ext.js'});
function get_page(){
    $.getJSON(
        '<?php echo site_url('ajax/user_handle/get_list');?>',
        {
              begin: (current_status.page_num - 1) * current_status.page_size,
              length: current_status.page_size
          },
          function(rs){
              if(rs.err===0){
                current_status.page_count = Math.ceil(rs.data.record_count/current_status.page_size);
                //呈现内容
                $('#rightinfo').html(template('list', $.extend({},current_status,rs.data)));
                //显示分页
                laypage({
                    cont: 'page_bar', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
                    pages: current_status.page_count, //通过后台拿到的总页数
                    curr: current_status.page_num, //当前页
                    jump: function(obj, is_self){ //触发分页后的回调
                        if(!is_self){ //点击跳页触发函数自身，并传递当前页：obj.curr
                            current_status.page_num = obj.curr;
                            get_page();
                        }
                    }
                });
              }else if(rs.err===4){
                  //数据实际页数减少，但前端没有刷新，仍旧请求不存在的页码，返回的是“列表为空”的错误
                  current_status.page_num --;
                  get_page();
              }else{
                  layer.msg(rs.msg, {icon:2,time:2000});
              }            
        }
    );
};

//初始化
function init(){
    var hash = window.location.hash.split('/');
    if(hash[0]=='#add'){
    	$('.btn_add').hide();
    	$('.btn_back').show();
    	$('#rightinfo').html(template('add', {}));
    	
    	$( ".selectmenu" ).selectmenu({width: 162});

    	$('.imgshow .infobox').hover(function(){
    		$(this).find('a').show();
        },function(){
        	$(this).find('a').hide();
        });
    	$('.imgshow a').on('click', function(){
        	$(this).parent().siblings('input').val('');
    	    infoshow($(this).parent().parent());
    	});
    }else if(hash[0]=='#edit' && hash[1]>0){
        var id = hash[1];
    	$('.btn_add').hide();
    	$('.btn_back').show();
    	$.getJSON(
                '<?php echo site_url('ajax/user_handle/get');?>',
                {
                    id:id
                },
                function(rs){
                    if(rs.err===0){
                    	$('#rightinfo').html(template('edit', rs.data));
                    	
                    	$( ".selectmenu" ).selectmenu({width: 162});

                    	$('.imgshow .infobox').hover(function(){
                    		$(this).find('a').show();
                        },function(){
                        	$(this).find('a').hide();
                        });
                    	$('.imgshow a').on('click', function(){
                        	$(this).parent().siblings('input').val('');
                    	    infoshow($(this).parent().parent());
                    	});
	            	    $('.imgshow').each(function(){
	            		    infoshow($(this));
	            	    });
                    }else{
                          layer.msg(rs.msg, {icon:2,time:2000});
                    }
                }
        );    	
    }else{
    	$('.btn_add').show();
    	$('.btn_back').hide();
    	get_page();	
    }
}
var current_status = { page_num:1, page_size:20, page_count:1 };
init();

//添加事件
$('.btn_add').on('click', function(){
	window.location.hash = 'add';
	init();
});
//返回列表
$('.btn_back').on('click', function(){
	window.location.hash = '';
	init();
});
//取消
$('#rightinfo').on('click', '.btn_cancle', function(){
	window.location.hash = '';
	init();
});
//删除
$('#rightinfo').on('click', '.act_delete',function(){
    var id = $(this).parent().parent().attr('data-id');
    $.post(
            '<?php echo site_url('ajax/user_handle/modify');?>',
            {
                  id:id,
                  deleted:1
            },
            function(rs){
                if(rs.err===0){
                    layer.msg('删除成功！', {icon:1,time:2000});    
                    get_page();
                }else{
                    layer.msg(rs.msg, {icon:2,time:2000});
                }
            },
            'json'
    );
});
//清理登陆信息
$('#rightinfo').on('click', '.act_clean', function(){
    var id = $(this).parent().parent().attr('data-id');
    $.post(
            '<?php echo site_url('ajax/user_handle/clean');?>',
            {
                id:id
            },
            function(rs){
                if(rs.err===0){
                    layer.msg('清理成功！', {icon:1,time:2000});    
                }else{
                    layer.msg(rs.msg, {icon:2,time:2000});
                }
            },
            'json'
    );
});
//编辑
$('#rightinfo').on('click', '.act_edit', function(){
	var id = $(this).parent().parent().attr('data-id');    
    window.location.hash = 'edit/'+id;
	init();
});
//图片上传
function infoshow($el){
	var src = $el.find('input').val();
	if(src){
		$el.find('img').attr('src','<?php echo up_path('headimg');?>' + src);
		$el.find('.infobox').show();
	}else{
		$el.find('.infobox').hide();
	}
}
$("#rightinfo").on('change', '#up_picture', function(){
	$.ajaxFileUpload({
	    url:'<?php echo site_url('ajax/upload_handle/headimg');?>',
	    fileElementId:'up_picture',
	    dataType: 'json',
	    success: function(rs,status){
	        if(rs.err===0){
		        $('#picture input').val(rs.data.save);
		        infoshow($('#picture'));
	        }else{
	        	layer.msg(rs.msg, {icon:2,time:2000});
	        }
	    }
	});
});
//保存
$('#rightinfo').on('submit','form', function(e) {
    e.preventDefault();
	var this_btn = $(this);
    if(!this_btn.attr('disabled')){
    	this_btn.attr('disabled',true);
    }else{
        return;
    }
    $(this).ajaxSubmit({
    	dataType:'json',
    	success:function(rs){
    		if(rs.err===0){
                layer.msg('保存成功！', {icon:1,time:2000}, function(){
                	if($("input[name='id']").val()==0){
        			    current_status.page_num = 1;
        		    }
        			window.location.hash = '';
        			init();
                });
            }else{
                layer.msg(rs.msg, {icon:2,time:2000}, function(){
                	this_btn.attr('disabled',false);
                });
            }
		}
    });
});
</script>